import React, { useState } from 'react';
import { Layout,Button } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
import { HashRouter as Router, NavLink } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import { LeftOutlined,RightOutlined, MinusOutlined, FullscreenOutlined, FullscreenExitOutlined, CloseOutlined } from '@ant-design/icons';
import '@/assets/styles/main.less';

import THSlider from '@/components/THSlider';
import Player from '../player';
import Search from '@/pages/search';
import routes from '@/router';

const { ipcRenderer } = require('electron');


function Main() {
  const [isMax, setIsMax] = useState(false);

  const changeFullScreen = (target) => {
    setIsMax(!isMax);
    if (target === 0) {
      // 恢复到之前
      ipcRenderer.send("unmaximize")
    } else {
      // 全屏
      ipcRenderer.send("maximize")
    }
  }
  const minWin = () => {
    ipcRenderer.send("minimize");
  }
  const closeWin = () => {
    ipcRenderer.send("close-win")
  };
  return (
    <Layout className="main-page">
      <Header className="top-nav">
        <div className="logo">小二郎音乐</div>
        <div className="container">
          <div className="left-container" style={{width: "300px"}}>
            <Button className="left bgc right" shape="circle" icon={<LeftOutlined />} />
            <Button className="right bgc right" shape="circle" icon={<RightOutlined />} />
            <Search />
            {/* 测试搜索列表 */}
            <Router >
            <NavLink to="/search" replace >111</NavLink>
            </Router>
            {/* 测试搜索列表 */}
          </div>
          <div className="control">
            <span>
              <MinusOutlined
                className="control-btn"
                style={{ color: "#fbd9d9", marginRight: "15px", fontSize: "18px" }}
                onClick= {() => minWin()}
              />
            </span>
            <span>
              {isMax ?
                <FullscreenExitOutlined className="control-btn" style={{color: "#fbd9d9", marginRight: "15px", fontSize: "18px"}} onClick={() => changeFullScreen(0)} /> :
                <FullscreenOutlined className="control-btn" style={{color: "#fbd9d9", marginRight: "15px", fontSize: "18px"}} onClick={() => changeFullScreen(1)}/>}
            </span>
            <span>
              <CloseOutlined
                className="control-btn"
                style={{ color: "#fbd9d9", fontSize: "18px" }}
                onClick= {() => closeWin()}
              />
            </span>
          </div>
        </div>
      </Header>
      <Layout className="main-box">
        {/* 左侧导航栏 */}
        <Sider className="sider-bar">
          <THSlider />
        </Sider>
        <Content>
          <Router>
            {renderRoutes(routes)}
        </Router>
        </Content>
      </Layout>
      {/* 底部播放区 */}
      <Footer className="footer">
        <Player />
      </Footer>
    </Layout>
  )
}

export default Main;
